<template>
<MenuPage 
    :columns="compositeScoreCol"
    :data="compositeScoreList"
    :page.sync="compositeScore.pageIndex"
    :size.sync="compositeScore.pageSize"
    :total="compositeScoreTotal"
    @queryFun="queryCompositeScoreList">
    <template slot="search">
            <Input
                v-model.trim="compositeScore.userName"
                clearable
                placeholder="用户名"
                style="width: 180px; margin-left: 15px"
                @on-change="changePage(1)"
            />
            <Input
                v-model.trim="compositeScore.nickName"
                clearable
                placeholder="昵称"
                style="width: 180px; margin-left: 15px"
                @on-change="changePage(1)"
            />
            <Button
                class="header-btn"
                type="primary"
                ghost
                style="height: 32px; margin-left: 5px"
                @click="refreshCompositeScoreList()"
                ><i class="el-icon-refresh-right"
            /></Button>
    </template>
        <integral-detail
            ref="integralDetail"
            :drawerTitle="drawerTitle"
            :drawerUserId="drawerUserId"
        ></integral-detail>
        <comprehensive-statistics
            ref="comprehensiveStatistics"
            :userId="userId"
            :companyName="companyName"
            :username="username"
        ></comprehensive-statistics>
    </div>
</MenuPage>
</template>
<script>
import usally from '@/mixin/usally';
import { getCompositeScoreList,getCompositeScoreListNew } from '@/api/experimenterTrack.js';
//	import encryption from '@/libs/encryption.js'
import IntegralDetail from '@/components/integral-detail';
import ComprehensiveStatistics from '@/components/creatPage/ComprehensiveStatistics.vue';
import { debounce } from '@/libs/utils';
export default {
    mixins: [usally],
    components: {
        IntegralDetail,
        ComprehensiveStatistics,
    },
    data() {
        const validateName = (rule, value, callback) => {
            //验证只能填入数字
            var reg = new RegExp('^[\u4E00-\u9FA5a-zA-Z0-9_-]*$');
            //验证警戒值
            if (value) {
                if (!reg.test(value)) {
                    callback(new Error('请输入中文、数字、字母、下划线、-'));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };
        //			let September = sessionStorage.getItem('November')
        //			September = JSON.parse(encryption.SelfUseDecrypt(September))
        return {
            //				USER_ID: September.userId,
            //				USER_Name: September.nickname,
            //				isRootDesigner: September.isRootDesigner,
            userId: '',
            companyName: '',
            username: '',
            showDefImg: true,
            showDefText: '加载中',
            compositeScore: {
                username: '',
                nickname: '',
                pageIndex: 1,
                pageSize: 10,
            },
            compositeScoreCol: [
                {
                    title: '排行',
                    width: 60,
                    minWidth:60,
                    key: 'rank',
                    align: 'center',
                    // render:(h,params) => {
                    // 	return h('span',(this.compositeScore.pageSize)*(this.compositeScore.pageIndex-1) + (params.row._index+1))
                    // }
                },
                {
                    title: '用户名',
                    key: 'username',
                    align: 'center',
                    tooltip: true,
                    placement: 'top-left',
                    width: 200,
                },
                {
                    title: '昵称',
                    key: 'nickname',
                    align: 'center',
                    tooltip: true,
                    width: 150,
                },
                {
                    title: '积分',
                    key: 'userIntegral',
                    align: 'center',
                    tooltip: true,
                    width: 100,
                    render: (h, params) => {
                        return h(
                            'Tag',
                            {
                                props: {
                                    color: 'blue',
                                },
                                style: {
                                    // cursor: 'pointer !important'
                                },
                                nativeOn: {
                                    click: () => {
                                        // this.showDrawer(params.row)
                                    },
                                },
                            },
                            params.row.userIntegral
                        );
                    },
                },
                {
                    title: '综合评分',
                    key: 'totalScore',
                    align: 'center',
                    tooltip: true,
                    width: 120,
                },
                {
                    title: '勋章等级',
                    key: 'userMedalNum',
                    align: 'center',
                    tooltip: true,
                    width: 100,
                    render: (h, params) => {
                        if (params.row.userMedalNum) {
                            return h(
                                'Tooltip',
                                {
                                    props: {
                                        content: this.medalNumFilter(params.row.userMedalNum),
                                        transfer: true,
                                        placement: 'top-start',
                                        'max-width': 400,
                                    },
                                },
                                [
                                    h('img', {
                                        attrs: {
                                            src: this.getMedal(params.row.userMedalNum),
                                        },
                                        style:{
                                            height: '30px',
                                            verticalAlign: 'middle'
                                        }
                                    }),
                                ]
                            );
                        } else {
                            return h('span', '新手');
                        }
                    },
                },
                {
                    title: '统计',
                    align: 'center',
                    key: 'totalScore1',
                    tooltip: true,
                    width: 100,
                    render: (h, params) => {
                        return h(
                            'Button',
                            {
                                props: {
                                    type: 'info',
                                    size: 'small',
                                },
                                style: {
                                    'font-size': '12px',
                                },
                                on: {
                                    click: () => {
                                        // this.gotoComprehensive(params.row)
                                        this.userId = params.row.id;
                                        this.username = params.row.username;
                                        this.companyName = params.row.companyName;
                                        this.$refs.comprehensiveStatistics.init(this.userId);
                                    },
                                },
                            },
                            '综合统计'
                        );
                    },
                },
                {
                    title: '学习详情',
                    key: 'totalScore2',
                    align: 'center',
                    tooltip: true,
                    width: 100,
                    render: (h, params) => {
                        return h(
                            'Button',
                            {
                                props: {
                                    type: 'info',
                                    size: 'small',
                                },
                                style: {
                                    'font-size': '12px',
                                },
                                on: {
                                    click: () => {
                                        this.showDrawer(params.row);
                                    },
                                },
                            },
                            '查看'
                        );
                    },
                },
                {
                    title: '报告',
                    align: 'center',
                    key: 'totalScore3',
                    tooltip: true,
                    width: 100,
                    render: (h, params) => {
                        return h(
                            'Button',
                            {
                                props: {
                                    type: 'info',
                                    size: 'small',
                                },
                                style: {
                                    'font-size': '12px',
                                },
                                on: {
                                    click: () => {
                                        this.gotoReportPage(
                                            params.row.id,
                                            params.row.username,
                                            params.row.companyName
                                        );
                                    },
                                },
                            },
                            '查看报告'
                        );
                    },
                },
                {
                    title: '操作',
                    key:'action',
                    width: 140,
                    opList:[
                        {
                            txt:'查看学习轨迹',
                            on: {
                                click: (data,e) => {
                                    sessionStorage.setItem('queryObj', this.queryObj);
                                    this.$router.push({
                                        name: 'staticticsDetail',
                                        query: {
                                            id: data.id,
                                            name: data.nickname,
                                            username: data.username,
                                        },
                                    });
                                },
                            },
                        }
                    ]
                },
                {
                    title: '操作',
                    width: 100,
                    placement: 'top-right',
                    action: true,
                    show:false,
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                    },
                                    style: {
                                        background: 'none',
                                        border: 'none',
                                        boxShadow: 'none',
                                    },
                                    on: {
                                        click: () => {
                                            sessionStorage.setItem('queryObj', this.queryObj);
                                            this.$router.push({
                                                name: 'staticticsDetail',
                                                query: {
                                                    id: params.row.id,
                                                    name: params.row.nickname,
                                                    username: params.row.username,
                                                },
                                            });
                                        },
                                    },
                                },
                                [
                                    h('img', {
                                        attrs: {
                                            src: require('../../assets/project/magnifier-h.png'),
                                            title: '查看学习轨迹',
                                        },
                                        style: {
                                            cursor: 'pointer',
                                            'margin-right': '5px',
                                            'vertical-align': 'middle',
                                            //width:'16px',
                                            //height:'16px',
                                            display: 'inline-block',
                                        },
                                    }),
                                    h('span', {
                                        style: {
                                            cursor: 'pointer',
                                            color: '#2f70ff',
                                        },
                                    }),
                                ]
                            ),
                        ]);
                    },
                },
            ],
            compositeScoreList: [], //试卷列表
            compositeScoreTotal: 0, //排行总数
            medal1: require('./integral-new/medal-0.png'),
            medal2: require('./integral-new/medal-1.png'),
            medal3: require('./integral-new/medal-2.png'),
            medal4: require('./integral-new/medal-3.png'),
            medal5: require('./integral-new/medal-4.png'),
            medal6: require('./integral-new/medal-5.png'),
            medal7: require('./integral-new/medal-6.png'),
            medal8: require('./integral-new/medal-7.png'),
            medal9: require('./integral-new/medal-8.png'),
            medal10: require('./integral-new/medal-8.png'),
            // medal1: require('@/view/experimenterTrack/imgs/medal-1.png'),
            // medal2: require('@/view/experimenterTrack/imgs/medal-2.png'),
            // medal3: require('@/view/experimenterTrack/imgs/medal-3.png'),
            // medal4: require('@/view/experimenterTrack/imgs/medal-4.png'),
            // medal5: require('@/view/experimenterTrack/imgs/medal-5.png'),
            // medal6: require('@/view/experimenterTrack/imgs/medal-6.png'),
            // medal7: require('@/view/experimenterTrack/imgs/medal-7.png'),
            // medal8: require('@/view/experimenterTrack/imgs/medal-8.png'),
            // medal9: require('@/view/experimenterTrack/imgs/medal-9.png'),
            // medal10: require('@/view/experimenterTrack/imgs/medal-10.png'),
            drawerTitle: '',
            drawerUserId: '',
        };
    },
    computed: {
        pageTitle () {
            //当前菜单显示名
            return this.$store.getters.pageTitle;
        } 
    },
    filters: {},
    watch: {},
    methods: {
        gotoReportPage(id, name, companyName) {
            const { href } = this.$router.resolve({
                name: 'assessmentReport',
                query: {
                    id: id,
                    username: name,
                    companyName: companyName,
                },
            });
            window.openTrain(href, '_blank');
        },

        showDrawer(item) {
            this.drawerTitle = `${item.username}-学习详情`;
            this.drawerUserId = item.id;
            this.$refs.integralDetail.show();
        },
        getMedal(num) {
            if (num > 10) {
                num = 10; // 最高只有十个等级
            }
            switch (num) {
                case 1:
                    return this.medal1;
                case 2:
                    return this.medal2;
                case 3:
                    return this.medal3;
                case 4:
                    return this.medal4;
                case 5:
                    return this.medal5;
                case 6:
                    return this.medal6;
                case 7:
                    return this.medal7;
                case 8:
                    return this.medal8;
                case 9:
                    return this.medal9;
                case 10:
                    return this.medal10;
                default:
                    return;
            }
        },
        medalNumFilter(num) {
            if (num > 10) {
                num = 10;
            }
            switch (num) {
                case 1:
                    return '初级一级';
                case 2:
                    return '初级二级';
                case 3:
                    return '初级三级';
                case 4:
                    return '初级四级';
                case 5:
                    return '中级一级';
                case 6:
                    return '中级二级';
                case 7:
                    return '中级三级';
                case 8:
                    return '高级一级';
                case 9:
                    return '高级二级';
                case 10:
                    return '特级';
                default:
                    return;
            }
        },
        // 设置高度
        setStyle: debounce(function () {
            window.fullHeight = document.documentElement.clientHeight;
            window.fullWidth = document.documentElement.clientWidth;
            this.fullHeight = window.fullHeight;
            this.fullWidth = window.fullWidth;
            this.setTableHei = this.fullHeight - 197;
            this.compositeScore.pageSize = Math.floor(this.setTableHei / 96);
            if (this.compositeScoreTotal > this.compositeScore.pageSize) {
                let maxPage = Math.ceil(this.compositeScoreTotal / this.compositeScore.pageSize);
                if (maxPage < this.compositeScore.pageIndex) {
                    this.compositeScore.pageIndex = maxPage;
                }
            }
            this.queryCompositeScoreList();
        }, 500),
        refreshCompositeScoreList() {
            this.compositeScore.userName = '';
            this.compositeScore.nickName = '';
            this.changePage(1);
        },
        queryCompositeScoreList() {
            //查询试卷列表
            clearTimeout(this.timer);
            let _this = this;
            let params = JSON.parse(JSON.stringify(_this.compositeScore));
            //查询条件存储
            this.queryObj = JSON.stringify(params);
            getCompositeScoreListNew(params)
                .then((data) => {
                    if (data.code === 1) {
                        _this.compositeScoreList = data.data.items;
                        _this.compositeScoreTotal = data.data.total;
                        if (_this.compositeScoreList.length <= 0) {
                            _this.showDefImg = true;
                            _this.showDefText = '暂无信息';
                        } else {
                            _this.showDefImg = false;
                        }
                    } else {
                        _this.showDefImg = true;
                        _this.showDefText = '暂无信息';
                        _this.$Message.error(data.message);
                        _this.compositeScoreList = [];
                        _this.compositeScoreTotal = 0;
                    }
                })
                .catch((error) => {
                    console.log(error);
                    _this.compositeScoreList = [];
                    _this.compositeScoreTotal = 0;
                })
                .finally(() => {
                    this.timer = setTimeout(() => {
                        this.queryCompositeScoreList();
                    }, 10000);
                });
        },
        changePage: debounce(function (val) {
            this.compositeScore.pageIndex = val;
            this.queryCompositeScoreList();
        }, 500),
    },
    mounted() {
        //赋值查询条件
        let queryObj = sessionStorage.getItem('queryObj');
        if (queryObj) {
            let params = JSON.parse(queryObj);
            this.compositeScore = params;
            sessionStorage.removeItem('queryObj');
        }
        this.queryCompositeScoreList();
        // this.setStyle();
        // window.onresize = () => {
        //     this.setStyle();
        // };
    },
    beforeDestroy() {
        window.onresize = null;
        clearTimeout(this.timer);
    },
    created() {},
};
</script>
<style scoped>
</style>
